<template>
	<ComWrapper>
		<el-row :gutter="15">
			<el-col :lg="24">
				<el-card shadow="never" class="aboutTop">
					<div class="aboutTop-info">
						<img src="../../assets/logo.png">
						<h2>{{data.name}}</h2>
						<p>{{data.version}}</p>
					</div>
				</el-card>
				<el-card shadow="never" header="dependencies">
					<el-descriptions border :column="3">
						<el-descriptions-item v-for="(value, key) in data.dependencies" :key="key" :label="key">
              {{value}}
            </el-descriptions-item>
					</el-descriptions>
				</el-card>
				<el-card shadow="never" header="devDependencies">
					<el-descriptions border :column="3">
						<el-descriptions-item v-for="(value, key) in data.devDependencies" :key="key" :label="key">
              {{value}}
            </el-descriptions-item>
					</el-descriptions>
				</el-card>
			</el-col>
		</el-row>
	</ComWrapper>
</template>

<script setup>
import data from '../../../package.json'
</script>

<style lang="scss" scoped>
.aboutTop {
  border: 0;
  background: linear-gradient(to right, #8E54E9, #4776E6);color: #fff;
}
.aboutTop-info {
  text-align: center;
  img {
    width: 100px;
  }
  h2 {
    font-size: 26px;
    margin-top: 15px;
  }
  p {
    font-size: 16px;
    margin-top: 10px;
  }
}
</style>